<template>
    <div>
        <el-form :inline="true" :model="queryParam" class="demo-form-inline">
            <el-form-item label="查询条件">
                <el-input clearable size="mini" v-model="queryParam.keyword" placeholder="请输入店铺名称/店铺电话"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button size="mini" type="primary" @click="toQuery">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    label="标题" prop="title"/>
            <el-table-column
                    prop="resourcesStr"
                    label="宠物照片">
                <template slot-scope="scope">
                    <el-image :src="scope.row.resourcesUrls==null?'':scope.row.resourcesUrls.split(',')[0]"
                              :preview-src-list="scope.row.resourcesUrls==null?'':scope.row.resourcesUrls.split(',')"></el-image>
                </template>
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="宠物名称"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="gender"
                    label="性别">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.gender == 0" type="success">公</el-tag>
                    <el-tag v-else-if="scope.row.gender == 1" type="warning">母</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="age"
                    label="宠物年龄">
            </el-table-column>
            <el-table-column
                    prop="price"
                    label="价格">
            </el-table-column>
            <el-table-column
                    prop="coatColor"
                    label="毛色">
            </el-table-column>
            <el-table-column
                    prop="petType"
                    label="品种">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="发布人地址">
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="发布人帐号">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button :disabled="scope.row.state != 0" type="text" size="small" @click="shengheClick(scope.row.id)">
                        处理
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryParam.currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="queryParam.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                queryParam: {
                    currentPage: 1,
                    pageSize: 10,
                    state: 0 //这个是固定值，只查待审核的【即状态为下架】
                },
                multipleSelection: [],
                tableData: [],
                total: 0
            }
        },
        mounted() {
            this.toQuery();
        },
        methods: {
            shengheClick(id, state) {
                this.$confirm('是否继续此操作?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //发送请求并携带参数
                    this.$http.get("/searchmaster/shenghe?id=" + id + "&state=1").then(res => {
                        if (res.data.success) {
                            this.toQuery()
                        }
                        this.$notify({
                            title: '提示',
                            message: res.data.message,
                            type: 'warning'
                        });
                    })
                })

            },
            toQuery() {
                // console.log('查询条件---->'+JSON.stringify(this.queryParam));
                this.$http.post("/searchmaster", this.queryParam).then(res => {
                    this.tableData = res.data.data;
                    this.total = res.data.total;
                })
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.queryParam.pageSize = val;
                this.toQuery();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.queryParam.currentPage = val;
                this.toQuery();
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            }
        }
    }
</script>
